<template>
    <div class="ball">
        <div class="inner"></div>
    </div>
</template>

<style lang="scss">
.ball {
    
    position:fixed;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    left: 10px;
    top: 300px;
    border: 1px dashed #aaa;
    animation: moveX 2s linear infinite;
    
    .inner{
        background: #fc5e56;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: moveY 1s cubic-bezier(0.5,-1,1,1) infinite;
    }
}
@keyframes moveX {
    to {
        transform: translateX(100px);
    }
}
@keyframes moveY{
    to {
        transform: translateY(500px);
    }
}
</style>